<template>
  <mt-loadmore :bottom-method="loadBottom" :top-status.sync="topStatus">
    <div class="moveBox">
      <div class="media" v-for="m in moveList">
        <div class="media-left media-middle">
          <a href="#">
            <img class="media-object" :src="m.images.large" alt="...">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">{{m.title}}</h4>

        </div>
      </div>
    </div>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
    </div>


  </mt-loadmore>

</template>
<script>
  import {Loadmore} from 'mint-ui'
  export default {
    data() {
      return {
        topStatus: '',
        moveList: []
        // ...
      };
    },
    methods: {
      loadBottom(status) {
        let start = this.moveList.length;
        this.topStatus = status;
        this.axios({
          url: '/api/v2/movie/in_theaters?start=' + start + 'count=10',
          method: 'get'
        }).then((res) => {
          this.moveList = res.data.subjects;
          console.log(res.data)
        })
      },
    },
    mounted(){
      this.axios({
        url: '/api/v2/movie/in_theaters?count=10',
        method: 'get'
      }).then((res) => {
        this.moveList = res.data.subjects;
        console.log(res.data)
      })
    }
    // ...
  };
</script>
<style lang="css">
  .moveBox {
    border: 1px solid;
  }

  .media-object {
    max-height: 100px;
  }
</style>
